<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0 auto;
    }

    .qqq {
        width: 150px;
        height: 30px;
        margin-top: 100px;
    }

    .yixing {
        width: 25px;
        height: 25px;
        background: url(./star.png) -3px -3px;
        float: left;
        display: none;
        z-index: 3;
    }

    .anxing {
        width: 25px;
        height: 25px;
        background: url(./star.png) -3px -28px;
        float: left;

    }
</style>

<body>
    <div class="qqq">
        <!--  <div class="yixing" id="q111"></div>
        <div class="yixing" id="q222"></div>
        <div class="yixing" id="q333"></div>
        <div class="yixing" id="q444"></div>
        <div class="yixing" id="q555"></div>
        <div class="anxing" onclick="yikexing"></div>
        <div class="anxing" onclick="erkexing"></div>
        <div class="anxing" onclick="sankexing"></div>
        <div class="anxing" onclick="sikexing"></div>
        <div class="anxing" onclick="wukexing"></div> -->

        <img src="./13 (2).png " alt="" id="img1">
        <img src="./13 (2).png " alt="" id="img2">
        <img src="./13 (2).png " alt="" id="img3">
        <img src="./13 (2).png " alt="" id="img4">
        <img src="./13 (2).png " alt="" id="img5">
        <h2 style="text-align: center;"></h2>

    </div>
    <script>
        /*  function yikexing() {
             var q111 = document.getElementById("q111");
 
             q111.style.display = "block";
         }
         function erkexing() {
             var q111 = document.getElementById("q111");
             var q222 = document.getElementById("q222");
 
             q111.style.display = "block";
             q222.style.display = "block";
         }
         function sankexing() {
             var q111 = document.getElementById("q111");
             var q222 = document.getElementById("q222");
             var q333 = document.getElementById("q333");
 
             q111.style.display = "block";
             q222.style.display = "block";
             q333.style.display = "block";
         }
         function sikexing() {
             var q111 = document.getElementById("q111");
             var q222 = document.getElementById("q222");
             var q333 = document.getElementById("q333");
             var q444 = document.getElementById("q444");
 
 
 
             q111.style.display = "block";
             q222.style.display = "block";
             q333.style.display = "block";
             q444.style.display = "block";
         }
         function wukexing() {
             var q111 = document.getElementById("q111");
             var q222 = document.getElementById("q222");
             var q333 = document.getElementById("q333");
             var q444 = document.getElementById("q444");
             var q555 = document.getElementById("q555");
 
             q111.style.display = "block";
             q222.style.display = "block";
             q333.style.display = "block";
             q444.style.display = "block";
             q555.style.display = "block";
 
         }
  */
        var img1 = document.getElementById("img1");
        var img2 = document.getElementById("img2");
        var img3 = document.getElementById("img3");
        var img4 = document.getElementById("img4");
        var img5 = document.getElementById("img5");
        var H1 = document.querySelector("h2");

        img1.onclick = function () {
            img1.src = "./13 (1).png";
            img2.src = "./13 (2).png";
            img3.src = "./13 (2).png";
            img4.src = "./13 (2).png";
            img5.src = "./13 (2).png";
            H1.innerHTML = "1颗星";
        }

        img2.onclick = function () {
            img1.src = "./13 (1).png";
            img2.src = "./13 (1).png";
            img3.src = "./13 (2).png";
            img4.src = "./13 (2).png";
            img5.src = "./13 (2).png";
            H1.innerHTML = "2颗星";
        }

        img3.onclick = function () {
            img1.src = "./13 (1).png";
            img2.src = "./13 (1).png";
            img3.src = "./13 (1).png";
            img4.src = "./13 (2).png";
            img5.src = "./13 (2).png";

            H1.innerHTML = "3颗星";
        }

        img4.onclick = function () {
            img1.src = "./13 (1).png";
            img2.src = "./13 (1).png";
            img3.src = "./13 (1).png";
            img4.src = "./13 (1).png";
            img5.src = "./13 (2).png";
            H1.innerHTML = "4颗星";
        }

        img5.onclick = function () {
            img1.src = "./13 (1).png";
            img2.src = "./13 (1).png";
            img3.src = "./13 (1).png";
            img4.src = "./13 (1).png";
            img5.src = "./13 (1).png";
            H1.innerHTML = "5颗星";
        }

    </script>

</body>

</html>